import { PlusOutlined } from '@ant-design/icons';
import {
  DatePicker,
  Form,
  Input,
  Radio,
  Select,
  Upload,
} from 'antd';
import { Header } from 'antd/es/layout/layout';
import React, { useState } from 'react';

const { RangePicker } = DatePicker;
const { TextArea } = Input;

const normFile = (e: any) => {
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};
const FormDisabledDemo: React.FC = () => {
  return (
    <div style={{width:"100%",height:"100%"}} >
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 14 }}
        layout="horizontal"
        style={{ maxWidth: 900,marginTop:"-24px",overflowX: 'hidden',width:"100%"}}
      >
        <Form.Item label="网站状态">
          <Radio.Group>
            <Radio value="apple"> 开启 </Radio>
            <Radio value="pear"> 关闭 </Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="站点名称"  style={{marginTop:"-10px"}}>
          <Input style={{width:"240px",}}/>
        </Form.Item>
        <Form.Item label="电脑版Logo" style={{marginTop:"-10px"}}>
          <Select  style={{width:"240px"}}>
            <Select.Option value="demo">/uploads/setting/202012220/602354</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item style={{width:"800px",marginLeft:"150px",marginTop:"-24px"}} valuePropName="fileList" getValueFromEvent={normFile}>
          <Upload action="/upload.do" listType="picture-card">
            <div >
              <PlusOutlined />
              <div style={{ marginTop: 8 }}></div>
            </div>
          </Upload>
        </Form.Item>
        <Form.Item label="电脑版白色Logo" style={{marginTop:"-6px"}}>
          <Select  style={{width:"240px"}}>
            <Select.Option value="demo">/uploads/setting/202012220/847aac4</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item style={{width:"800px",marginLeft:"150px",marginTop:"-24px"}} valuePropName="fileList" getValueFromEvent={normFile}>
          <Upload action="/upload.do" listType="picture-card">
            <div >
              <PlusOutlined />
              <div style={{ marginTop: 8 }}></div>
            </div>
          </Upload>
        </Form.Item>
        <Form.Item label="手机版Logo" style={{marginTop:"-6px"}}>
          <Select  style={{width:"240px"}}>
            <Select.Option value="demo">/uploads/setting/202012220/584sga4</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item style={{width:"800px",marginLeft:"150px",marginTop:"-24px"}} valuePropName="fileList" getValueFromEvent={normFile}>
          <Upload action="/upload.do" listType="picture-card">
            <div >
              <PlusOutlined />
              <div style={{ marginTop: 8 }}></div>
            </div>
          </Upload>
        </Form.Item>
        <Form.Item label="微信二维码" style={{marginTop:"-6px"}}>
          <Select  style={{width:"240px"}}>
            <Select.Option value="demo">/uploads/setting/202012220/60sfe77</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item  style={{width:"800px", marginLeft:"150px",marginTop:"-24px"}} valuePropName="fileList" getValueFromEvent={normFile}>
          <Upload action="/upload.do" listType="picture-card">
            <div >
              <PlusOutlined />
              <div style={{ marginTop: 8 }}></div>
            </div>
          </Upload>
        </Form.Item>
      </Form>
    </div>
  );
};

export default () => <FormDisabledDemo />;